/* eslint-disable @typescript-eslint/no-unused-vars */
import ReactDOM from 'react-dom'
import { useState, useRef, useEffect } from 'react'

const App = () => {
  console.log('2 click');
  const [count, setCount] = useState(0)
  const [theme, setTheme] = useState('pink')
  const countRef = useRef(count)
  // 每次count值改变，就把最新的值赋给countRef.current
  // 这个相当于vue的watch函数
  // 并且更新countRef.current不会触发组件的更新
  // 修改countRef.current值的两个位置
  // 1.useEffect函数中
  // 2.事件处理程序中
  // 他们的区别是什么呢？触发时机不同
  // 1.useEffect函数中修改，在组件重新渲染之后执行
  // 2.事件处理程序中修改，  在组件重新渲染之前执行
  // 注意：如果在组件重新渲染之前执行
  // 不仅可以获取到最新值，也可以获取到上一次的值


  // 这里是在useEffect函数中
  // useEffect(() => {
  //   countRef.current = count
  // }, [count])

  // 这里是在事件处理程序中
  // 把赋值操作放在事件处理函数中也是可以实现效果的
  const onclick = () => {
    console.log('1 click');
    // 如果count + 1 是最新值，那么count就是上一次的值
    const newCount = count + 1
    // 获取最新值
    countRef.current = newCount
    // 获取上一次的值
    // countRef.current = count
    setCount(newCount)
  }
  // 点击3秒后显示的按钮，代码就会记录当时count的值
  // 然后疯狂点击加一的按钮，count的值会不断增加
  // 使用countRef就可以获取到count的最新值
  // 但是count拿到的count还是原来的值
  const showCount = () => {
    setTimeout(() => {
      console.log('展示count值： ', count)
      console.log('展示count最新值： ', countRef.current)
    }, 3000)
  }

  return (
    <div style={{ backgroundColor: theme, padding: 10 }}>
      <button onClick={() => setTheme(theme === 'pink' ? 'white' : 'pink')}>
        切换主题
      </button>
      <h1>计数器：{count}</h1>
      <button onClick={onclick}>+1</button>
      <button onClick={showCount}>点击按钮3秒后显示count</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))
